<template>
    <div class="piform-display">
        <!-- 导出范围输入 -->
        <div class="controls">
            <label>从 ID:</label>
            <input type="number" v-model.number="exportRange.start" />
            <label>到 ID:</label>
            <input type="number" v-model.number="exportRange.end" />
            <button @click="exportToExcel" class="btn btn-primary"><i class="fas fa-file-excel"></i> 导出到Excel</button>
        </div>
        <h1>P_IForm Data</h1>
        <table>
            <thead>
                <tr>
                    <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in paginatedData" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.medicalID }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.career }}</td>
                    <td>{{ item.SOD }}</td>
                    <td>{{ item.DM ? '是' : '否' }}</td>
                    <td>{{ item.MT ? '是' : '否' }}</td>
                    <td>{{ item.followTime }}</td>
                    <td>{{ item.diagnosis ? '是' : '否' }}</td>
                    <td>{{ item.ACE }}</td>
                    <td>{{ item.liver ? '是' : '否' }}</td>
                    <td>{{ item.bulla ? '是' : '否' }}</td>
                    <td>{{ item.bronchiectasis ? '是' : '否' }}</td>
                    <td>{{ item.emphysema ? '是' : '否' }}</td>
                    <td>{{ item.other }}</td>
                    <td>{{ item.P53 }}</td>
                    <td>{{ item.PGP }}</td>
                    <td>{{ item.SOX2 }}</td>
                    <td>{{ item.GAGE7 }}</td>
                    <td>{{ item.GBU }}</td>
                    <td>{{ item.MAGEA1 }}</td>
                    <td>{{ item.CAGE }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex ? '男' : '女' }}</td>
                    <td>{{ item.smoke ? '是' : '否' }}</td>
                    <td>{{ item.nodule_diameter }}</td>
                    <td>{{ item.nodule_spicules ? '是' : '否' }}</td>
                    <td>{{ item.PrGRP }}</td>
                    <td>{{ item.CEA }}</td>
                    <td>{{ item.SCC }}</td>
                    <td>{{ item.CYFRA }}</td>
                    <td>{{ item.LCBP }}</td>
                    <td>{{ item.n_size }}</td>
                    <td>{{ item.n_morphology }}</td>
                    <td>{{ item.n_num }}</td>
                    <td>{{ item.n_density }}</td>
                    <td>{{ item.n_location }}</td>
                    <td>{{ item.CTR }}</td>
                    <td>{{ item.n_grading }}</td>
                    <td>{{ item.n_interface }}</td>
                    <td>{{ item.n_edge }}</td>
                    <td>{{ item.calcification ? '是' : '否' }}</td>
                </tr>
            </tbody>
        </table>

        <!-- 分页组件 -->
        <div class="pagination">
            <button :disabled="currentPage <= 1" @click="currentPage--" class="btn btn-secondary"><i class="fas fa-angle-left"></i> 上一页</button>
            <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
            <button :disabled="currentPage >= totalPages" @click="currentPage++" class="btn btn-secondary">下一页 <i class="fas fa-angle-right"></i></button>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import XLSX from 'xlsx';

export default {
    data() {
        return {
            urls: {
                getForm: '/medical/lable/getForm',
            },
            piformData: [], // This will hold the fetched data
            exportRange: { start: null, end: null }, // Range for export
            currentPage: 1, // Current page
            perPage: 20, // Number of items per page
            headers: [
                'ID', 'Medical ID', '姓名', '职业', 'SOD', '糖尿病史', '恶行肿瘤史', '随访时间', '是否确诊', '血清', '肝功能是否异常', 
                '肺大泡', '支气管扩张', '肺气肿', '其他', 'P53', 'PGP9.5', 'SOX2', 'GAGE7', 'GBU4-5', 'MAGEA1', 'CAGE', '年龄', '性别', 
                '是否吸烟', '结节直径', '结节有无毛刺', 'PrGRP', 'CEA', 'SCC', 'CYFRA21-1', 'LCBP', '结节大小', '结节形态', '结节数量', 
                '结节密度', '结节部位', 'CTR', '结节分级', '肺界面', '结节边缘', '是否钙化'
            ]
        };
    },
    mounted() {
        this.getForm();
    },
    computed: {
        paginatedData() {
            const start = (this.currentPage - 1) * this.perPage;
            const end = start + this.perPage;
            return this.piformData.slice(start, end);
        },
        totalPages() {
            return Math.ceil(this.piformData.length / this.perPage);
        }
    },
    methods: {
        async getForm() {
            try {
                const response = await axios.get(`${this.URLhost}${this.urls.getForm}`, {
                    params: { tagType: 'eye' }
                });
                const result = response.data;
                console.log(result);
                if (result.code === 0 && result.data.code === 0) {
                    this.piformData = result.data.data;
                } else {
                    console.error('获取图片列表失败:', result.msg || result.data.msg);
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        },
        exportToExcel() {
            if (!this.exportRange.start || !this.exportRange.end) {
                alert("请设置导出范围");
                return;
            }

            // Filter data based on selected range
            const filteredData = this.piformData.filter(item =>
                item.id >= this.exportRange.start && item.id <= this.exportRange.end);

            // Prepare data for export
            const ws = XLSX.utils.json_to_sheet(filteredData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "P_IForm Data");

            // Generate Excel file and download
            XLSX.writeFile(wb, "piform_data_export.xlsx");
        }
    }
};
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

.piform-display {
    padding: 20px;
    font-family: Arial, sans-serif;
}

.controls {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.controls label {
    margin-right: 8px;
}

.controls input[type="number"] {
    width: 80px;
    padding: 5px;
    margin-right: 8px;
}

.controls .btn {
    padding: 5px 15px;
    border-radius: 5px;
}

h1 {
    color: #333;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
}

table th,
table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: bold;
}

table tr:hover {
    background-color: #f1f1f1;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination button {
    padding: 8px 16px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.pagination button:hover:not(:disabled) {
    background-color: #ddd;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination span {
    margin: 0 10px;
    font-size: 14px;
}
</style>